<template>
	<view class="container">
		<view class="group_item" style="height: 100upx;font-size: 35upx; font-weight: bold;line-height: 100upx;">
			基本信息
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>姓名
			</view>
			<input type="text" v-model="birthInfo.name" placeholder="请输入姓名" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>联系电话：
			</view>
			<input disabled="true" type="text" v-model="birthInfo.phone" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>身份证号：
			</view>
			<input disabled="true" type="text" v-model="birthInfo.idCard" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>一卡通账号：
			</view>
			<input disabled="true" type="text" v-model="birthInfo.cardAccount" class="picker_class" />
		</view>
		<view class="group_item1">
			<view class="group_title1">
				附件上传
			</view>
			<view class="tip">出生医学证明和户口证明</view>
			<view>
				<robby-image-upload v-model="birthInfo.imageUrl" fileKeyName="file" :header="header" :formData="formData"
				 :server-url="uploadUrl" :showUploadProgress="true" limit="6"></robby-image-upload>
			</view>
		</view>
		<view class="group_item" v-if="birthInfo.signature==''">
			<view class="group_title">
				电子签名
			</view>
			<view style="width: calc(100% - 300upx);text-align: right;">
				<text class="yticon icon-huifu" style="font-size: 30upx;color:#00BFFF;line-height: 100upx;margin-right: 60upx;"
				 @click="navTo('/pages/declare/qm')">点击签名</text>
			</view>
		</view>
		<view class="group_item" v-else>
			<view class="group_title">
				电子签名
				<image style="transform:rotate(270deg);" :src=birthInfo.signature mode="aspectFit"></image>
			</view>
			<view>

			</view>
		</view>
		<view class="group_item">
			<view class="button_title">
				<button type="primary" class="button_class" @click="addRegistration">提交</button>
			</view>
		</view>
		<view>
			<wPicker mode="date" @confirm="confirmDate" ref="dateTime" themeColor="#f00" :current="true"></wPicker>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import robbyImageUpload from "@/components/robby-image-upload/robby-image-upload";
	import {
		mapState,
		mapMutations,
	} from 'vuex';
	export default {
		data() {
			return {
				businessKey: '',
				businessCategory: '',
				startAssigneeId: uni.getStorageSync("userInfo").userUuid,
				startAssigneeName: uni.getStorageSync("userInfo").name,
				areaCode: this.$api.util.getAreaCode(),
				birthInfo: {
					name: '', //姓名
					sex: '', //性别
					birthday: '', //出生年月
					idCard: '', //身份证号
					phone: '', //联系电话
					reason: '', //申请原因
					signature: '', //电子签名
					imageUrl: [], //附件
				},
				header: {},
				formData: {},
				uploadUrl: this.$api.request.apiBaseUrl + 'uploadSingleImage/smartserver/H5',
				url: '' //返回路由
			}
		},
		onLoad(options) {
			this.businessKey = decodeURIComponent(options.businessKey);
			this.businessCategory = decodeURIComponent(options.businessCategory);
			this.initData(decodeURIComponent(options.businessKey))
		},
		methods: {
			//初始化业务详情
			initData(businessKey) {
				this.$api.request.getBirthById({
					id: businessKey
				}, (res) => {
					if (res.code == 200) {
						this.birthInfo = res.data
						this.birthInfo.imageUrl = JSON.parse(res.data.imageUrl)
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			otherFun(object) {
				this.birthInfo.signature = object.url
			},
			showToast(name) {
				uni.showToast({
					title: name,
					icon: 'none',
					duration: 2000
				});
				return
			},
			addRegistration() {
				if (this.birthInfo.name == "") {
					this.showToast('请输入姓名')
				} else if (!this.$api.util.validateMobileNo(this.birthInfo.phone)) {
					this.showToast('请输入正确的手机号')
				} else if (!this.$api.util.validateIdCardNo(this.birthInfo.idCard)) {
					this.showToast('请输入正确的身份证')
				} else if (this.birthInfo.cardAccount == "") {
					this.showToast('请输入一卡通号')
				} else {
					let params = {
						name: this.birthInfo.name,
						birthday: '',
						idCard: this.birthInfo.idCard,
						phone: this.birthInfo.phone,
						signature: this.birthInfo.signature,
						imageUrl: JSON.stringify(this.birthInfo.imageUrl),
						cardAccount: this.birthInfo.cardAccount,
						startAssigneeId: this.startAssigneeId,
						startAssigneeName: this.startAssigneeName,
						areaCode: this.areaCode,
						processDefinitionKey: "birth-flow",
						businessKey: this.businessKey,
						businessCategory: this.businessCategory
					}
					this.$api.request.reStartProcess(params, (res) => {
						if (res.code == 200) {
							this.$api.msg(res.msg)
							this.timer = setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							this.$api.msg(res.msg)
						}
					})
				}
			},
		},
		components: {
			wPicker,
			robbyImageUpload
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.tip {
		font-size: 18upx;
		color: #ff0000;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_title1 {
		width: 200upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 300upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}

	.button_class1 {
		bottom: 15upx;
		margin-top: 30upx;
		width: 80%;
		margin-left: 80%;
		height: 70upx;
		line-height: 70upx;
		background-color: #1DA3EE !important;
		color: white
	}

	.button_title {
		width: 100%;
		padding-top: 60upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}
</style>
